import React, { useState } from 'react';
import { useSelector ,useDispatch } from 'react-redux';
import { DropdownMenu } from 'react-vant';
import { ProductCard, Tag, } from 'react-vant';
import { STORETYPE,PROPSTYPE ,LOVETYPE,TYPETYPE} from '../../Type/Store.d';
import ChildrenItem from '../../Compoment/ChildrenItem';

export const option1 = [
    { text: '喜爱度升序', value: 1 },
    { text: '喜爱度降序', value: 2 },
];
export const option2 = [
    { text: '男频', value: '男频' },
    { text: '女频', value: '女频' }
];

function Sort() {
    const [value1, setValue1] = useState<Record<string, string | number>>({});
    const [value2, setValue2] = useState<Record<string, string | number>>({});
    const Dispatch = useDispatch();
    const childrenList = useSelector((state:STORETYPE)=>state.childrenList);
    return (
        <div className='Sort'>
            <div className='setValue'>
            <DropdownMenu value={value1} onChange={(v) => {
                setValue1(v);
                Dispatch({
                    type:LOVETYPE,
                    payload:v.value1
                })
            }}>
                <DropdownMenu.Item name="value1" options={option1} placeholder='默认排序'/>
            </DropdownMenu>
            <DropdownMenu value={value2} onChange={(v) => {
                setValue2(v);
                Dispatch({
                    type:TYPETYPE,
                    payload:v.value2
                })
            }}>
                <DropdownMenu.Item name="value2" options={option2} placeholder='分类'/>
            </DropdownMenu>
            </div>
            <ChildrenItem fo={1}></ChildrenItem>
        </div>
    )
}

export default Sort